<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<style>
html,body{height:100%; margin:0; padding:0;}
.dome{ width:80%; height:80%; background:#eee;
margin:  auto;
 position:relative;}
.dome div{
	position:absolute;
	width:20%;
	height:60%;
	margin:20% 0;
	background:#069;
	font-size:10em;
	text-align:center;
	line-height:2;
	-webkit-transition:all .5s;
}
 
.dome div:nth-child(5n+1){
	left:0%;
	background:#FFB40D;
	-webkit-transform:scale(.5) skewY(-10deg);
	box-shadow:0 15px 5px rgba(255, 180, 13,.3);
 
}
.dome div:nth-child(5n+2){
	left:20%;
	background:#FF0042;
	-webkit-transform:scale(.7) skewY(-10deg);
	box-shadow:0 15px 5px rgba(255, 0, 66,.3);
}
.dome div:nth-child(5n+3){
	left:40%; 
	background:#9600FF;
	box-shadow:0 15px 5px rgba(150, 0, 255,.3);
}
.dome div:nth-child(5n+4){
	left:60%;
	background:#18A035;
	-webkit-transform:scale(.7) skew(0deg,10deg);
	box-shadow:0 15px 5px rgba(24, 160, 53,.3);
}
.dome div:nth-child(5n+5){
	left:80%;
	background:#0D8AFF;
	-webkit-transform:scale(.5) skew(0deg,10deg);
 	box-shadow:0 15px 5px rgba(13, 138, 255,.3);
}
.dome:hover div:nth-child(5n+1){
	left:0%;
	background:#FFB40D;
	-webkit-transform:scale(.5) skewY(-10deg) scaleX(-1);
 	opacity:0;
}
.dome:hover  div:nth-child(5n+2){
	left:20%;
	background:#FF0042;
	-webkit-transform:scale(.7) skewY(-10deg) scaleX(-1);
	opacity:0;
}
.dome:hover  div:nth-child(5n+3){
	left:40%;
	background:#9600FF;
	-webkit-transform:scaleX(-1);
	opacity:0;
}
.dome:hover  div:nth-child(5n+4){
	left:60%;
	background:#18A035;
	-webkit-transform:scale(.7) skew(0deg,10deg) scaleX(-1);
	opacity:0;
}
.dome:hover  div:nth-child(5n+5){
	left:80%;
	background:#0D8AFF;
	-webkit-transform:scale(.5) skew(0deg,10deg) scaleX(-1);
 	opacity:0;
}
 .dome div:nth-child(5n+6){
	left:0%;
	background:#FFB40D;
	-webkit-transform:scale(.5) skewY(-10deg) scaleX(-1);
	opacity:0;
}
.dome  div:nth-child(5n+7){
	left:20%;
	background:#FF0042;
	-webkit-transform:scale(.7) skewY(-10deg) scaleX(-1) ;
	opacity:0;
}
.dome  div:nth-child(5n+8){
	left:40%;
	background:#9600FF;
	-webkit-transform:scaleX(-1);
	opacity:0;
}
.dome  div:nth-child(5n+9){
	left:60%;
	background:#18A035;
	-webkit-transform:scale(.7) skew(0deg,10deg) scaleX(-1);
	opacity:0;
	
}
.dome  div:nth-child(5n+10){
	left:80%;
	background:#0D8AFF;
	-webkit-transform:scale(.5) skew(0deg,10deg) scaleX(-1);
	opacity:0;
 
}
.dome:hover div:nth-child(5n+6){
	left:0%;
	background:#0D8AFF ;
	-webkit-transform:scale(.5) skewY(-10deg) scaleX(1);
	opacity:1;
	box-shadow:0 15px 5px rgba(13, 138, 255,.3);
}
.dome:hover  div:nth-child(5n+7){
	left:20%;
	background:#18A035 ;
	-webkit-transform:scale(.7) skewY(-10deg) scaleX(1);
	opacity:1;
	box-shadow:0 15px 5px rgba(24, 160, 53,.3);
}
.dome:hover  div:nth-child(5n+8){
	left:40%;
	background:#9600FF;
	-webkit-transform:scaleX(1);
	opacity:1;
	box-shadow:0 15px 5px rgba(150, 0, 255,.3);
}
.dome:hover  div:nth-child(5n+9){
	left:60%;
	background:#FF0042;
	-webkit-transform:scale(.7) skew(0deg,10deg) scaleX(1);
	opacity:1;
	box-shadow:0 15px 5px rgba(255, 0, 66,.3);
}
.dome:hover  div:nth-child(5n+10){
	left:80%;
	background:#FFB40D;
	-webkit-transform:scale(.5) skew(0deg,10deg) scaleX(1);
	opacity:1;
 	box-shadow:0 15px 5px rgba(255, 180, 13,.3);
}
</style>
<div class="dome">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>5</div>
<div>4</div>
<div>3</div>
<div>2</div>
<div>1</div>
</div>
</body>
</html>
